<template>
  <header class="message-info-view-header" v-if="chat">
    <div class="message-info-views">
      <p v-if="currentType">
        <span v-if="chatType('C2C')" @click="openUser" class="single">
          <span class="nick">{{ chatNick("C2C", chat) }}</span>
          <Label :model="model" :userID="chat?.conversationID" />
        </span>
        <span v-else-if="chatType('GROUP')" @click="openSetup" class="group">
          <span class="nick"> {{ chatNick("GROUP", chat) }}</span>
          <Label :item="chat" />
        </span>
        <span v-else-if="chatType('@TIM#SYSTEM')" class="system"> 系统通知 </span>
      </p>
    </div>

    <div>
      <el-popover placement="bottom" :width="300" trigger="click" v-show="isShOwOptionsButton">
        <template #reference>
          <el-button type="primary" plain>转接</el-button>
        </template>
        <div style="height: 60px">
          <span style="padding-right: 10px">选择成员: </span>
          <el-select v-model="value1" placeholder="请选择成员" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-popover>
      <el-button @click="handleTransfers" type="danger" plain>提交</el-button>
      <el-button v-if="currentType && chatType('GROUP')" type="primary" @click="showQuick"
        >快捷回复</el-button
      >
    </div>

    <!-- <div class="flex">
      <div class="message-info-add" v-show="chat.type == 'GROUP' && false" title="添加成员">
        <svg-icon iconClass="tianjia" class="icon-hover" />
      </div>
      <div class="message-info-setup" v-show="chat.type == 'GROUP'" title="设置" @click="openSetup">
        <FontIcon iconName="MoreFilled" class="icon-hover" />
      </div>
    </div> -->
  </header>
</template>

<script setup>
import { useGetters, useState } from "@/utils/hooks/useMapper";
import emitter from "@/utils/mitt-bus";
import Label from "@/views/chatStudio/components/Label.vue";
import { useStore } from "vuex";
import { ref, watch } from "vue";

import { getUserInfo, getUserGroup, getUserListByCondition } from "@/api/node-admin-api/role.js";
import {
  assignCustomer,
  sessinComplete,
  removeAssign,
  getUserMessageBySessionId,
} from "@/api/node-admin-api/chat.js";
const { dispatch, commit } = useStore();
const { currentType } = useGetters(["currentType"]);
const { chat, model, currentConversation, currentReplyMsg } = useState({
  chat: (state) => state.conversation.currentConversation,
  model: (state) => state.robot.model,
  currentConversation: (state) => state.conversation.currentConversation,
  currentReplyMsg: (state) => state.conversation.currentReplyMsg,
});

const chatType = (type) => {
  return currentType.value === type;
};

const emits = defineEmits(["showQuick"]);

const showQuick = () => {
  emits("showQuick");
};

watch(
  chat,
  (newValue, oldValue) => {
    // 当 chat 发生变化时，调用 isAtKefu 函数
    console.log("newValue: ", newValue);
    if (newValue) {
      isAtKefu(newValue);
    }
  },
  { deep: true }
);
const isShOwOptionsButton = ref(true);
const isAtKefu = (val) => {
  const userId = val.groupProfile.selfInfo.userID;
  getUserMessageBySessionId({
    sessionId: val.conversationID.replace("GROUP", ""),
  }).then((res) => {
    if (res.code == 20000) {
      const handler = res.data.detail.handler;

      if (handler !== userId) {
        isShOwOptionsButton.value = false;
      } else {
        isShOwOptionsButton.value = true;
      }
    }
  });
};

const handleer = ref("");
const gethandleer = () => {};

const chatNick = (type, chat) => {
  if (type === "C2C") {
    return chat.userProfile.nick || chat.userProfile.userID || chat.remark;
  } else if (type === "GROUP") {
    const {
      groupProfile: { name, groupID, memberCount },
    } = chat;
    const count = memberCount ? `(${memberCount})` : "";
    return `${name || groupID} ${count}`;
  }
};

const value1 = ref("");
const options = ref([]);
const getAllUser = () => {
  getUserListByCondition({ limit: 99999, page: 1 }).then((res) => {
    if (res.code == 20000) {
      const { records = [] } = res.data;
      options.value = records;
    }
  });
};

const handleTransfers = () => {
  if (!value1.value) {
    errorMessage("请选择转接的客服！");
    return;
  }
  const params = {
    sessionId: Number(currentConversation.conversationID.value.replace("GROUP", "")), // 会话id
    userid: value1.value, // 客服uid?
  };
  assignCustomer(params).then((response) => {
    if (response === 20000) {
      successMessage("转接成功！");
      dispatch("GET_MESSAGE_LIST", {
        type: CONVERSATIONTYPE.UPDATE_CURRENT_SESSION,
        payload: {
          conversationID: currentConversation.conversationID.value,
        },
      });
    }
  });
};

const openSetup = () => {
  emitter.emit("onGroupDrawer", true);
};
const openUser = () => {};
</script>

<style lang="scss" scoped>
.message-info-view-header {
  height: 60px;
  background: var(--color-body-bg);
  border-bottom: 1px solid var(--color-border-default);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  .message-info-views {
    .group {
      cursor: pointer;
    }
    .single,
    .group {
      max-width: 200px;
      display: inline-block;
      @include text-ellipsis();
      .nick {
        margin-right: 5px;
      }
    }
  }
}

.message-info-setup {
  margin-left: 10px;
}
</style>
